<!DOCTYPE html>
<html style="background-color:#f5f5f5;" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<!-- ztree -->
<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">

<script type="text/javascript" th:src="@{/asserts/vendors/jquery/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>

<!-- 根路径 -->
<script type="text/javascript" th:inline="javascript">
    ctx = /*[[@{/}]]*/ '';
	console.info(ctx);
</script>	

<SCRIPT type="text/javascript">

	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getNodes();
		for (var i = 0; i < nodes.length; i++) { //设置节点展开
			treeObj.expandNode(nodes[i], true, true , true);
		}
	}

	function zTreeOnCheck(event, treeId, treeNode) {

		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	　　 var nodes = treeObj.getCheckedNodes(true); //在提交表单之前将选中的checkbox收集

		 if(nodes.length == 0){
			 layer.alert("请选择角色.") ;
			 return ;
		 }

	　　 var array = new Array();
	　　 for(var i=0;i<nodes.length;i++){
		　　	array.push(nodes[i].id);
	　　 }
		var roles = array.join(",");

		$("input[id=selectResourceParentNode]").attr("data-id" ,roles) ;
	};

	$(document).ready(function() {
		var setting = {
			async : {
				enable : true,
				type: "get",
				url: ctx+"portal/desktop/web/linkPath/findAll"
			},
			check: {
                enable: true
            },
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "resourceParent",
					rootPId : 0
				},
				key : {
					name : "linkName"
				}
			},
			callback : {
				onCheck: zTreeOnCheck ,
				onAsyncSuccess : zTreeOnAsyncSuccess
			}
		};

		var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
	});
</SCRIPT>
<style type="text/css">
.ztree * {
	font-size: 13px;
}

.ztree li span.button.add {
	margin-left: 2px;
	margin-right: -1px;
	background-position: -144px 0;
	vertical-align: top;
	*vertical-align: middle
}
.zTreeDemoBackground{
	float:left ;
	width:300px;
	padding:20px;
}
.form-control{
	height: 34px;
    border-radius: 3px;
    padding-left: 10px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #BDC4C9;
    display: block;
    box-shadow: inset 0px 1px 0px #F1F0F1;
}
.training-frame-body{
	padding:10px ;
	background-color:#f5f5f5 ;
}
.training-frame-body{
	padding:0px !important ;
}

</style>
</HEAD>

<BODY class="training-frame-body">

	<input type="hidden" value="" name="roleId" />
	<input id="selectResourceParentNode" type="hidden" />

	<div class="content_wrap">
		<div class="card col-12" style="float: left;">
			<input type="hidden" name="applicationId" value="${applicationId}" />
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
</BODY>
</HTML>
